<template>
  <div ref="sortFileList" v-if="files.length > 0">
    <div v-for="(file,index) in files" class="file-item">
      <a class="left" target="_blank" :href="file">
        <div class="file-icon"><a-image :src="fileIcon(file)" :width="32" :height="32"></a-image></div>
        <vertical-align-bottom-outlined class="download" />
        <span class="text">{{lastName(file)}}</span>
      </a>
      <delete-outlined @click="deleteFile(index)" class="delete" style="cursor: pointer" />
      <label class="label">
        <check-outlined class="success" />
      </label>
    </div>
  </div>
</template>
<script>
export default {
  name:'ExFilePreview'
}
</script>
<script setup>
import { useVModel } from '@vueuse/core'
import Sortable from 'sortablejs'
import {lastName,fileIcon} from '@/utils'
import {ref,nextTick} from "vue";
const props = defineProps({
  value:Array,
})
const sortFileList = ref()
const emit = defineEmits(['update:value'])
const files = useVModel(props, 'value', emit)
let sortable
nextTick(() => {
  sortable = Sortable.create(sortFileList.value, {
    handle: '.file-item',
    onEnd: evt => {
      const index = files.value.splice(evt.oldIndex, 1)[0]
      files.value.splice(evt.newIndex, 0, index)
    }
  })
})
function deleteFile(key){
  files.value.splice(key, 1)
}
</script>

<style scoped lang="scss">
.file-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  border: 1px solid #c0ccda;
  padding: 0 10px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.file-item label{
  position: absolute;
  right: -17px;
  top: -7px;
  width: 46px;
  height: 26px;
  background: #13ce66;
  transform: rotate(45deg);
  box-shadow: 0 1px 1px #ccc;
}
.file-item .left{
  cursor: pointer;
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.85);
}
.file-item .left .text{
  margin-left: 10px;
}
.file-item:hover{
  border-style:dashed ;
}
.file-item:hover .file-icon,.file-item:hover .label{
  display: none;
}
.file-item:hover .delete{
  display: block;
}
.file-item:hover .download{
  display: block;
  margin-left: 10px;
}
.file-item .download,.file-item .delete{
  display: none;
}
.file-item label span{
  font-size: 12px;
  margin-top: 12px;
  position: absolute;
  top: 0;
  right: 17px;
  transform: rotate(-45deg);
  color: white;
}
.dark-theme{
  .file-item{
    border: 1px solid #434343;
  }
  .file-item .left{
    color: hsla(0,0%,100%,.85)
  }
}
</style>
